<template>
  <div class="get_tcas">
    <h3>门限阈值</h3>
    <el-form :model="getTca" ref="getTcaForm" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="12">
          <MeEqPtp/>
        </el-col>
        <el-col :span="4">
          <el-form-item label="周期类型" prop="granularity">
            <el-select v-model="getTca.granularity" placeholder="请选择周期类型">
              <el-option
                  v-for="(i,index) in granularity"
                  :key="index"
                  :value="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性能参数" prop="pmParameterName">
            <el-cascader v-model="getTca.pmParameterName"
                         :options="options"
                         :props="{ checkStrictly: true }"
                         :show-all-levels="false"
                         clearable
                         @change="handleChange"></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label-width="0">
            <el-button type="primary">确认</el-button>
            <el-button @click="resetForm('getTcaForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
        :data="tableData['tca-parameters']['tca-parameter']"
        style="width: 100%;;margin:0 auto;"
        height="100%">
      <el-table-column
          fixed
          prop="object-name"
          label="对象名称"
          width="320">
      </el-table-column>
      <el-table-column
          prop="pm-parameter-name"
          label="性能参数">
      </el-table-column>
      <el-table-column
          prop="granularity"
          label="周期类型">
      </el-table-column>
      <el-table-column
          prop="threshold-type"
          label="门限标识">
      </el-table-column>
      <el-table-column
          prop="object-type"
          label="对象类型">
      </el-table-column>
      <el-table-column
          prop="threshold-value"
          label="门限值">
      </el-table-column>
    </el-table>

    <el-button type="primary" style="float: right;margin: 60px" @click="isShow = true">新建</el-button>
    <el-dialog
        :visible.sync="isShow"
        width="500px"
        :close-on-click-modal="false">
      <div slot="title" class="header-title" :style="{'background':'#2b7ffd','color':'#fff'}">
        <div style="padding:15px 20px;">设置性能参数</div>
      </div>
      <TcaParams :name="nodeName"></TcaParams>
    </el-dialog>
  </div>
</template>

<script>
import MeEqPtp from "@/components/common/MeEqPtp";
import {options} from "@/assets/config/PerformanceConfig";
import TcaParams from "@/components/performance/TcaParams";

export default {
  name: "Tcas",
  components: {MeEqPtp, TcaParams},
  data() {
    return {
      //窗口控制
      isShow: false,
      nodeName: 'otna',

      form: {
        date1: '',
        date2: '',
      },
      granularity: ['1min', '15min', '24h'],
      thresholdType: ['HIGH', 'LOW'],
      options,
      'setTca': {
        "object-name": "PTP=/shelf=1/slot=8/subslot=1/port=101",
        "pm-parameter-name": "",
        "granularity": "",
        "threshold-type": "",
        "object-type": "",
        "threshold-value": "-23.98"
      },
      //查询性能越限阈值
      getTca: {
        objectName: '',
        granularity: '',
        pmParameterName: '',
      },
      tableData: {
        "tca-parameters": {
          "tca-parameter": [
            {
              "object-name": "PTP=/shelf=1/slot=8/subslot=1/port=101",
              "pm-parameter-name": "OPT_INPUTPOW",
              "granularity": "1min",
              "threshold-type": "low",
              "object-type": "PTP",
              "threshold-value": "-23.98"
            },
            {
              "object-name": "端口-2",
              "pm-parameter-name": "PM_FEES",
              "granularity": "15min",
              "threshold-type": "low",
              "object-type": "PTP",
              "threshold-value": "1.69"
            },
            {
              "object-name": "otna",
              "pm-parameter-name": "LD_BIAS",
              "granularity": "24h",
              "threshold-type": "low",
              "object-type": "ME",
              "threshold-value": "51.69"
            },
            {
              "object-name": "槽道-1 OTN2X8",
              "pm-parameter-name": "RX_PKT_SUM",
              "granularity": "15min",
              "threshold-type": "high",
              "object-type": "EQ",
              "threshold-value": "-96.24"
            }
          ]
        }
      },
      //查询当前性能
      getCurrentPerformances: {
        objectName: '',
        granularity: '',
        pmParameterName: '',
        starTime: '',
      },
      currentPerformances: [{
        "object-name": "PTP=/shelf=1/slot=8/subslot=1/port=101",
        "granularity": "15min",
        "pm-parameter-name": "RX_PKT_SUM",
        "digital-pm-value": '',
        "analog-pm-value": {
          'max-value': '',
          'min-value': '',
          'average-value': '',
          'current-value': ''
        },
        "start-time": "2022-04-07T09:18:18Z ",
        "end-time": "2022-04-08T09:18:18Z "
      }]

    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleChange(value, e) {
      console.log(value);
      console.log(e);
    },

  }
}
</script>

<style scoped>

</style>